<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>用户注册 - 考试成绩系统</title>
    <!-- Tailwind CSS -->
    <script src="https://cdn.tailwindcss.com"></script>
    <!-- Font Awesome -->
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <!-- 配置Tailwind -->
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#3b82f6',
                        secondary: '#10b981',
                        accent: '#8b5cf6',
                        neutral: '#64748b',
                        success: '#22c55e',
                        warning: '#f59e0b',
                        danger: '#ef4444',
                    },
                    fontFamily: {
                        sans: ['Inter', 'system-ui', 'sans-serif'],
                    },
                },
            }
        }
    </script>
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .gradient-bg {
                background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%);
            }
            .card-shadow {
                box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
            }
            .input-focus {
                @apply focus:ring-2 focus:ring-primary focus:border-transparent transition-all duration-200;
            }
        }
    </style>
</head>
<body class="bg-gray-50 font-sans">
    <div class="min-h-screen flex items-center justify-center p-4">
        <div class="w-full max-w-md">
            <!-- 注册卡片 -->
            <div class="bg-white rounded-2xl card-shadow overflow-hidden">
                <!-- 头部渐变区域 -->
                <div class="gradient-bg text-white p-8">
                    <div class="flex flex-col items-center">
                        <div class="w-16 h-16 bg-white rounded-full flex items-center justify-center mb-4">
                            <i class="fa fa-user-plus text-primary text-3xl"></i>
                        </div>
                        <h2 class="text-2xl font-bold">创建账户</h2>
                        <p class="mt-2 opacity-90 text-center">加入考试成绩系统，开始追踪您的学习进度</p>
                    </div>
                </div>
                
                <!-- 表单区域 -->
                <div class="p-8">
                    {% if error_message %}
                        <div class="mb-4 p-3 bg-red-50 text-red-600 rounded-md text-sm flex items-start">
                            <i class="fa fa-exclamation-circle mt-0.5 mr-2"></i>
                            <span>{{ error_message }}</span>
                        </div>
                    {% elif success_message %}
                        <div class="mb-4 p-3 bg-green-50 text-green-600 rounded-md text-sm flex items-start">
                            <i class="fa fa-check-circle mt-0.5 mr-2"></i>
                            <span>{{ success_message }}</span>
                        </div>
                    {% endif %}
                    
                    <form action="/register" method="POST">
                        <div class="mb-4">
                            <label for="username" class="block text-sm font-medium text-gray-700 mb-1">用户名</label>
                            <div class="relative">
                                <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                                    <i class="fa fa-user text-gray-400"></i>
                                </div>
                                <input type="text" id="username" name="username" 
                                    class="w-full pl-10 pr-3 py-2 border border-gray-300 rounded-lg shadow-sm input-focus" 
                                    placeholder="请输入用户名" required minlength="3" maxlength="20">
                            </div>
                            <p class="mt-1 text-xs text-gray-500">3-20个字符，只能包含字母、数字和下划线</p>
                        </div>
                        
                        <div class="mb-4">
                            <label for="email" class="block text-sm font-medium text-gray-700 mb-1">电子邮箱</label>
                            <div class="relative">
                                <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                                    <i class="fa fa-envelope text-gray-400"></i>
                                </div>
                                <input type="email" id="email" name="email" 
                                    class="w-full pl-10 pr-3 py-2 border border-gray-300 rounded-lg shadow-sm input-focus" 
                                    placeholder="请输入电子邮箱" required>
                            </div>
                        </div>
                        
                        <div class="mb-4">
                            <label for="password" class="block text-sm font-medium text-gray-700 mb-1">密码</label>
                            <div class="relative">
                                <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                                    <i class="fa fa-lock text-gray-400"></i>
                                </div>
                                <input type="password" id="password" name="password" 
                                    class="w-full pl-10 pr-3 py-2 border border-gray-300 rounded-lg shadow-sm input-focus" 
                                    placeholder="请设置密码" required minlength="6">
                            </div>
                            <p class="mt-1 text-xs text-gray-500">至少6个字符，建议包含字母、数字和特殊字符</p>
                        </div>
                        
                        <div class="mb-6">
                            <label for="confirm_password" class="block text-sm font-medium text-gray-700 mb-1">确认密码</label>
                            <div class="relative">
                                <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                                    <i class="fa fa-lock text-gray-400"></i>
                                </div>
                                <input type="password" id="confirm_password" name="confirm_password" 
                                    class="w-full pl-10 pr-3 py-2 border border-gray-300 rounded-lg shadow-sm input-focus" 
                                    placeholder="请再次输入密码" required>
                            </div>
                        </div>
                        
                        <div class="flex items-start mb-6">
                            <input id="terms" name="terms" type="checkbox" 
                                class="mt-1 h-4 w-4 text-primary border-gray-300 rounded focus:ring-primary">
                            <label for="terms" class="ml-2 block text-sm text-gray-700">
                                我已阅读并同意 <a href="#" class="text-primary hover:text-primary/80">服务条款</a> 和 
                                <a href="#" class="text-primary hover:text-primary/80">隐私政策</a>
                            </label>
                        </div>
                        
                        <button type="submit" 
                            class="w-full bg-primary text-white py-3 px-4 rounded-lg hover:bg-primary/90 transition-colors font-medium flex items-center justify-center space-x-2">
                            <span>注册账户</span>
                            <i class="fa fa-user-plus"></i>
                        </button>
                    </form>
                    
                    <div class="mt-6 text-center">
                        <p class="text-sm text-gray-600">
                            已有账户? <a href="/login" class="text-primary font-medium hover:text-primary/80">立即登录</a>
                        </p>
                    </div>
                </div>
            </div>
            
            <!-- 底部信息 -->
            <div class="mt-8 text-center text-sm text-gray-500">
                <p>&copy; 2024 考试成绩查询与分析系统. 保留所有权利.</p>
            </div>
        </div>
    </div>

    <script>
        // 表单验证脚本
        document.addEventListener('DOMContentLoaded', function() {
            const form = document.querySelector('form');
            const passwordInput = document.getElementById('password');
            const confirmPasswordInput = document.getElementById('confirm_password');
            
            form.addEventListener('submit', function(e) {
                // 密码匹配验证
                if (passwordInput.value !== confirmPasswordInput.value) {
                    e.preventDefault();
                    // 创建错误提示
                    let errorElement = document.createElement('div');
                    errorElement.className = 'mb-4 p-3 bg-red-50 text-red-600 rounded-md text-sm';
                    errorElement.innerHTML = '两次输入的密码不一致';
                    
                    // 插入到表单顶部
                    if (form.querySelector('.bg-red-50')) {
                        form.querySelector('.bg-red-50').remove();
                    }
                    form.insertBefore(errorElement, form.firstChild);
                    
                    // 滚动到错误提示
                    errorElement.scrollIntoView({ behavior: 'smooth' });
                }
            });
        });
    </script>
</body>
</html>